<template>
	<view class="tag-container">
		<view class="top">
			<text class="title">{{title}}</text>
			<u-icon name="trash" v-if="showIcon"></u-icon>
		</view>
		<view class="list">
			<u-tag v-for="(item,index) in list" :key="index" :text="item[textKeyName]" plain
				:color="item[isHotKeyName] === 1 ? 'red' : '#969799'"
				:borderColor="item[isHotKeyName] === 1 ? 'red' : '#969799'" @click="onClickTag(item.keyword)">
			</u-tag>
		</view>
	</view>
</template>

<script>
	export default {
		name: "myTags",
		props: {
			title: {
				type: String,
				default: ''
			},
			showIcon: {
				type: Boolean,
				default: false
			},
			list: {
				// list数组项必须包含keyword字段,如果有表示是否高亮的字段,该字段必须为is_hot
				type: Array,
				default () {
					return []
				}
			},
			textKeyName: {
				type: String,
				default: ''
			},
			isHotKeyName: {
				type: String,
				default: ''
			}
		},
		methods: {
			onClickTag(keyword) {
				this.$emit('clickTag', keyword)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tag-container {
		margin-bottom: 40rpx;
		padding: 20rpx;
		background-color: #fff;

		.top {
			display: flex;
			justify-content: space-between;

			.title {
				margin-bottom: 10rpx;
			}
		}

		/deep/ .u-tag-wrapper {
			display: inline-block;
			margin-right: 20rpx;
			margin-bottom: 20rpx;

			.u-tag {
				display: inline-block;
			}
		}

		.list {
			display: flex;
			flex-wrap: wrap;
		}
	}
</style>
